<template>
    <div style="margin-left: auto">
      <p>退货通知单</p>
    </div>
  
    <div style="right: auto">
      <span>
        <el-button type="primary" @click="SalesOrderAdd()">保存</el-button>
      </span>
    </div>
  
    <hr />
    <el-scrollbar style="height: 320px; color: dimgray">
      <div class="scrollbar-flex-content">
        <p class="scrollbar-demo-item">
          <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="单据编码：" style="width: 308px" disabled="true">
              <el-input
                v-model="form.returnNumber"
                placeholder=""
                disabled="true"
              />
            </el-form-item>
  
            <el-form-item label="单据日期：" style="width: 308px">
              <el-date-picker v-model="form.documentsDate" type="date" />
            </el-form-item>
  
            <el-form-item label="单据状态：" style="width: 308px">
              <el-select v-model="form.documentstatus" disabled="true">
                <el-option label="开立" value="开立" />
                <el-option label="审核" value="审核" />
                <el-option label="返回" value="返回" />
              </el-select>
            </el-form-item>
  
            <el-form-item label="业务状态：" style="width: 308px">
              <el-select v-model="form.businessstateId">
                <el-option label="正常" value="正常" />
                <el-option label="挂起" value="挂起" />
                <el-option label="手工关闭" value="手工关闭" />
                <el-option label="系统关闭" value="系统关闭" />
              </el-select>
            </el-form-item>
          </el-form>
  
          <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="业务类型：" style="width: 308px">
              <el-select v-model="form.businessTypeId">
                <el-option label="普通退货" value="普通退货" />
                <el-option label="直运退货" value="直运退货" />
              </el-select>
            </el-form-item>
  
            <el-form-item label="操作员：" style="width: 308px">
              <el-input v-model="form.operator" disabled="true" />
            </el-form-item>
  
            <el-form-item label="审核员：" style="width: 308px">
              <el-input v-model="form.auditor" disabled="true" />
            </el-form-item>
  
            <el-form-item label="审核日期：" style="width: 308px">
              <el-date-picker v-model="form.auditDate" type="date" disabled="true" />
            </el-form-item>
          </el-form>
  
          <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="仓库：" style="width: 308px">
              <el-select v-model="form.warehouseld">
                <el-option label="成品仓" value="成品仓" />
              </el-select>
            </el-form-item>
  
            <el-form-item label="客户名称：" style="width: 308px">
              <el-input v-model="form.clientName" disabled="true" />
            </el-form-item>
  
            <el-form-item label="退货原因：" style="width: 308px">
              <el-select v-model="form.returnReason">
                <el-option label="外观问题" value="外观问题" />
                <el-option label="质量问题" value="质量问题" />
              </el-select>
            </el-form-item>
  
            <el-form-item label="处理方式：" style="width: 308px">
              <el-select v-model="form.processing">
                <el-option label="无" value="无" />
                <el-option label="计划生产" value="计划生产" />
              </el-select>
            </el-form-item>
          </el-form>
  
          <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="备注信息：" style="width: 308px">
              <el-input v-model="form.remark" />
            </el-form-item>
          </el-form>
        </p>
      </div>
    </el-scrollbar>
  
    <el-button type="primary" @click="form1.dialogTableVisible111 = true"
      >引入</el-button
    >
  
    <!-- 退货物料表 -->
    <table style="border-collapse: collapse">
      <tr>
        <td>序号</td>
        <td>销售单号</td>
        <td>发货单号</td>
        <td>物料编码</td>
        <td>物料名称</td>
        <td>型号规格</td>
        <td>主计量</td>
        <td>数量</td>
        <td>入库数量</td>
        <td>批号</td>
        <td>备注</td>
        <td>操作</td>
      </tr>
      <tr v-for="(ruleForm, index) in loge.healthArray">
        <td>
          {{ ruleForm.returnmaterialId }}
        </td>
        <td>
          {{ ruleForm.documentnumber }}
        </td>
        <td>
          {{ ruleForm.documentnumbers }}
        </td>
        <td>
          {{ ruleForm.itemBianma }}
        </td>
  
        <td>
          {{ ruleForm.materialName }}
        </td>
        <td>
          {{ ruleForm.specifications }}
        </td>
  
        <td>
          {{ ruleForm.measurenum }}
        </td>
        <td>
          {{ ruleForm.returnShulnum }}
        </td>
        <!-- 入库数量 -->
        <td>
          {{ ruleForm.beginNumbere }}
        </td>
        <!-- 批号 -->
        <td>
          <el-input v-model="ruleForm.piHao" style="width: 100px"> </el-input>
        </td>
        <!-- 备注 -->
        <td>
          <el-input v-model="ruleForm.remark" style="width: 100px"> </el-input>
        </td>
        <td>
          <el-link style="color: red" @click="del">删除</el-link>
        </td>
      </tr>
    </table>
  
    <!-- 出库信息弹出框 -->
    <div>
      <el-dialog
        v-model="form1.dialogTableVisible111"
        title="销售退货"
        width="1000"
      >
        <el-form :inline="true" :model="Materials" class="demo-form-inline">
          <el-form-item label="销售订单号">
            <el-input v-model="Materials.documentNumber" />
          </el-form-item>
          <el-form-item label="发货单号">
            <el-input v-model="Materials.documentNumbers" />
          </el-form-item>
          <el-form-item label="客户名称">
            <el-input v-model="Materials.clientName" />
          </el-form-item>
          <el-button type="primary" @click="SearchMaterialsShow">搜索</el-button>
        </el-form>
  
        <el-table
          :data="MaterialsShowlist"
          style="height: 500px"
          @selection-change="handleSelectionchange"
        >
          <el-table-column
            property="fhDocumentNumber"
            label="发货单号"
            width="150"
          />
          <el-table-column
            property="customerProfileName"
            label="客户"
            width="150"
          />
          <el-table-column property="itemBianma" label="物料编码" width="150" />
          <el-table-column property="materialName" label="物料名称" width="150" />
          <el-table-column property="documentType" label="主计量" width="150" />
          <el-table-column
            property="typeSpecification"
            label="行为规格"
            width="150"
          />
          <el-table-column property="deliverydate" label="发货日期" width="150" />
          <el-table-column property="quantity" label="发货数量" width="150" />
          <el-table-column property="" label="已退数量" width="150" />
          <el-table-column property="" label="未退数量" width="150" />
          <el-table-column type="selection" width="55" />
        </el-table>
        <el-button type="primary" @click="QueDing()">确定</el-button>
        <!-- 分页 -->
        <div>
          <tr>
            <td>
              <el-pagination
                v-model:current-page="Materials.PageIndex"
                v-model:page-size="Materials.PageSize"
                :page-sizes="[10, 20, 30, 40, 50]"
                :background="true"
                layout="total, slot, prev, pager, next"
                :total="Materials.totalCount"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              >
              </el-pagination>
            </td>
            <td>
              <el-pagination
                v-model:current-page="Materials.PageIndex"
                v-model:page-size="Materials.PageSize"
                :page-sizes="[10, 20, 30, 40, 50]"
                :background="true"
                layout="slot, sizes, jumper"
                :total="Materials.totalCount"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              >
              </el-pagination>
            </td>
          </tr>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script setup lang="ts">
  import { reactive, ref, onMounted, computed } from "vue";
  import { useRouter } from "vue-router";
  import { ElMessage } from "element-plus";
  import { useRoute } from "vue-router";
  import Cookie from "cookies-ts";
  import axios from "axios";
  import { number } from "echarts";
  const cookie = new Cookie();
  const router = useRouter();
  const route = useRoute();
const apiurls = import.meta.env.VITE_APP_API_URL_BasicInformationCommon;//5176
const bpiurls = import.meta.env.VITE_APP_API_URL_BasicInformationWrite;//5013
const cpiurls = import.meta.env.VITE_APP_API_URL_RBACCommon;//5214
const dpiurls = import.meta.env.VITE_APP_API_URL_RBACWrite;//5268
const epiurls = import.meta.env.VITE_APP_API_URL_SalesManagementCommon;//5227
const fpiurls = import.meta.env.VITE_APP_API_URL_SalesManagementWrite;//5020

  const form1 = reactive({
    //出库信息弹出框
    dialogTableVisible111: false
  });
  onMounted(() => {
    //出库信息显示
    SearchMaterialsShow();
    //映射用户名到操作员文本框里
    loadData();

    Getreturn()
  });
  //映射用户名到操作员文本框里
  const loadData = () => {
    if (cookie.get("employeeName") != null) {
      form.operator = cookie.get("employeeName") as string;
    }
  };
  
  //出库数据查询
  const Materials = reactive({
    documentNumber: "", //销售订单号
    documentNumbers: "", //发货单号
    clientName: "", //客户名称
    salesStaff: "", //销售员
    materialName: "", //物料名称
    PageIndex: 1,
    PageSize: 10,
    totalCount: 0,
    pageCount: 0
  });
  //出库数据显示
  const MaterialsShowlist: any = ref([]);
  const SearchMaterialsShow = () => {
    axios
      .get(epiurls+"/api/Shipping/ShippingnoteShowHandle", {
        params: {
          xSDocumentNumber: Materials.documentNumber,
          fHDocumentNumber: Materials.documentNumbers,
          customerProfileName: Materials.clientName,
          salesStaff: Materials.salesStaff,
          materialName: Materials.materialName,
          PageIndex: Materials.PageIndex,
          PageSize: Materials.PageSize
        }
      })
      .then((res) => {
        MaterialsShowlist.value = res.data.data;
        Materials.totalCount = res.data.totalCount;
        Materials.pageCount = res.data.pageCount;
        console.log(res.data.data, 1111111111);
      });
  };
  //分页
  const handleSizeChange = (val: number) => {
    Materials.PageSize = val;
    SearchMaterialsShow();
  };
  const handleCurrentChange = (val: number) => {
    Materials.PageIndex = val;
    SearchMaterialsShow();
  };
  
  //引入
  const xuan = ref([]);
  function handleSelectionchange(val: any) {
    xuan.value = val;
    console.log(xuan.value);
  }
  function QueDing() {
    localStorage.setItem("selectRows", JSON.stringify(xuan.value));
    form1.dialogTableVisible111 = false;
  
    if (xuan.value.length > 0) {
      let index = 1;
      loge.healthArray = xuan.value.map((item: any) => {
        form.clientName = item.customerProfileName; //客户名称
        return {
          salesOrderId: index++,
          xsDocumentNumber: item.xsDocumentNumber,//销售订单号
          fhDocumentNumber: item.fhDocumentNumber,//发货单号
          itemBianma: item.itemBianma,// 物料编码
          materialName: item.materialName,// 物料名称
          typeSpecification: item.typeSpecification,// 型号规格
          documentType: item.documentType,// 主计量
          quantity: item.quantity,// 数量
          customerProfileName: item.customerProfileName//客户名称
        };
      });
    }
  }
  
  //新增行序号
  const numbers = ref(1);
  const loge = reactive({
    healthArray: <any>[
      reactive({
        returnmaterialId: numbers.value,
        documentnumber: "", // 销售订单号
        documentnumbers: "", //发货单号
        itemBianma: "", // 物料编码
        materialName: "", // 物料名称
        specifications: "", // 型号规格
        measurenum: "", // 主计量
        returnShulnum: 0, // 数量
        beginNumbere: 0, // 入库数量
        PiHao: "", // 批号
        remark: "", // 备注
        createdOwnerId: cookie.get("employeeName"),
        createdTime: new Date(),
        updatedOwnerId: "",
        updatedTime: new Date(),
        deletedOwnerId: "",
        deletedTime: new Date(),
        isDeleted: true,
        auditor: cookie.get("employeeName"),
        auditDate: new Date()
      })
    ]
  });
  const aaa = cookie.get("employeeName");
  console.log(aaa);
  //删除行
  const del = () => {
    loge.healthArray.splice(loge.healthArray.length - 1, 1);
    ElMessage.warning({
      message: "删除成功"
    });
  };
  
  // 退货通知单表单
  const form = reactive({
    returnNumber: "", //单据编号
    documentsDate: "", //单据日期
    documentstatus: "", //单据状态
    businessstateId: "", //业务状态
    businessTypeId: "", //业务类型
    operator: "", //     操作员
    warehouseld: "", //仓库
    clientName: "", //客户名称
    returnReason: "", //退货原因
    processing: "", //处理方式
    remark: "" ,//备注
    auditor:"李四",
    auditDate: new Date()
  });

//反填
function Getreturn()
{
    axios.get(epiurls+'/api/ReturnNoticeses/GetFTreturnNotice',{
    params:{
        returnNumber:route.query.returnNumber
    }
  }).then(res=>{
    console.log(res.data);
    const data = res.data.data;
     console.log(data,678);
     
    form.returnNumber=data.returnNumber
    form.documentsDate=data.documentsDate
    form.documentstatus=data.documentstatus
    form.businessstateId=data.businessstateId
    form.businessTypeId=data.businessTypeId
    form.operator=data.operator
    form.warehouseld=data.warehouseld
    form.clientName=data.clientName
    form.returnReason=data.returnReason
    form.processing=data.processing
    form.remark=data.remark
    loge.healthArray =data.refundNoticeMaterials
    
    console.log(data.refundNoticeMaterials,9999);
    console.log(loge.healthArray,8888);
  }).catch(err=>{
    console.log(err);
    
  })
}
  
  //退货通知单添加
  const SalesOrderAdd = () => {
    console.log(loge.healthArray, 222222);//退货物料值
  
    let healthArrays:any = [];
    loge.healthArray.forEach((item:any) => {
    healthArrays.push({
      Documentnumber: item.xsDocumentNumber, // 销售订单号
      Documentnumbers: item.fhDocumentNumber, //发货单号
      ItemBianma: item.itemBianma, //物料编码
      MaterialName: item.materialName, //物料名称
      Specifications: item.typeSpecification, //型号规格
      Measurenum: item.documentType, //主计量
      ReturnShulnum: item.quantity, //数量
      BeginNumbere: 0, //入库数量
      PiHao: item.piHao, //批号
      Remark: item.remark //备注
    });
  });
  console.log(healthArrays,3333333);
  
    let request: any = ref([{}]);
    console.log(111, request);
  
    var datas = {
      returnNumber: form.returnNumber, //单据编号
      documentsDate: form.documentsDate, //单据日期
      documentstatus: form.documentstatus, //单据状态
      businessstateId: form.businessstateId, //业务状态
      businessTypeId: form.businessTypeId, //业务类型
      operator: form.operator, //     操作员
      warehouseld: form.warehouseld, //仓库
      clientName: form.clientName, //客户名称
      returnReason: form.returnReason, //退货原因
      processing: form.processing, //处理方式
      remark: form.remark, //备注
      refundNoticeMaterials: healthArrays
    };
    axios
      .post(
        fpiurls+"/api/ReturnNoticess/AddReturnNoticeandle",
        datas
      )
      .then((res) => {
        if (res.data.code == 0) {
          ElMessage.success(res.data.msg);
          router.push("/ReturnNotice/ReturnNoticeListView");
        } else {
          ElMessage.error(res.data.msg);
        }
      });
  };
  </script>
  
  <style scoped>
  .scrollbar-flex-content {
    display: flex;
  }
  
  .scrollbar-demo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1800px;
    height: 300px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
  }
  </style>
  <style scoped>
  .demo-pagination-block + .demo-pagination-block {
    margin-top: 10px;
  }
  
  .demo-pagination-block .demonstration {
    margin-bottom: 16px;
  }
  
  /* 设置第一行的 td 顶部边框加粗并设置为红色 */
  table tr:first-child td {
    border-top: 1px solid #ccc;
    /* 设置顶部边框为3px宽度的红色 */
    padding: 10px;
    text-align: center;
  }
  
  /* 设置 td 的样式 */
  
  table td {
    padding: 10px;
    border: 1px solid #ccc;
    text-align: center;
    font-size: 14px;
    height: 60px;
    width: 150px;
    white-space: nowrap;
    /* 防止内容换行 */
  }
  
  /* 可选：为 table 添加样式 */
  table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }
  
  /*______________________________________________________*/
  
  .table-container {
    max-width: 100%;
    overflow-x: auto;
    /* 启用水平滚动 */
    margin: 20px 0;
    /* 设置容器的外边距 */
  }
  
  /* :deep(.el-input__wrapper) {
        box-shadow: none;
        text-align: center;
    }
    
    :deep(.el-select__wrapper) {
        box-shadow: none;
    }
    
    ::v-deep(.center-input .el-input__inner) {
        text-align: center;
    } */
  </style>
  